import React, { Component } from 'react'
import { Button, Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import MusicList from '../components/MusicList'
import '../static/css/search.css'
export default class Search extends Component {
    search(e){
        console.log(e)
    }
    render() {
        return (
            <div id="search_app">
                 <Input style={{width:'80%'}} 
                 onPressEnter={(event)=>{this.search(event)}} 
                 size="large" 
                 placeholder="请输入搜索的歌名" 
                 prefix={<SearchOutlined />} />
                 <div className="label">
                    <button style={{
                    backgroundColor: 'white', 
                    borderRadius: 10, 
                    outline: 'none', 
                    border: "1px solid #EEE",
                    margin: "15px 30px"
                    }}>王进打高俅</button>
                    <button style={{
                    backgroundColor: 'white', 
                    borderRadius: 10, 
                    outline: 'none', 
                    border: "1px solid #EEE",
                    margin: "15px 30px"
                    }}>王进打高俅</button>
                    <button style={{
                    backgroundColor: 'white', 
                    borderRadius: 10, 
                    outline: 'none', 
                    border: "1px solid #EEE",
                    margin: "15px 30px"
                    }}>王进打高俅</button>
                    <button style={{
                    backgroundColor: 'white', 
                    borderRadius: 10, 
                    outline: 'none', 
                    border: "1px solid #EEE",
                    margin: "5px 30px"
                    }}>王进打高俅</button>
                 </div>
                 <MusicList></MusicList>
            </div>

        )
    }
}
